<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>后台登录-X-admin2.0</title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />

        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="../../../css/font.css">
        <link rel="stylesheet" href="../../../css/xadmin.css">
    </head>
    <body>
        <div class="x-body">
            <blockquote class="layui-elem-quote">
                说明：此报表为系统访问统计报表。
            </blockquote>
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main" style="width: 100%;height:400px;"></div>
            <blockquote class="layui-elem-quote">
                世界上最遥远的距离不是生与死，而是你亲手制造的BUG就在你眼前，你却怎么都找不到她。
            </blockquote>
			
        </div>
        <!-- 引入 echarts.js -->
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
        <script src="../js/echarts/bmap.min.js" type="text/javascript"></script>
		<script src="../../../js/jquery-3.1.1.js"></script>
        <script type="text/javascript">
			function index(result)
			{
			  var myChart = echarts.init(document.getElementById('main'));
			        var app = {};
			        option = null;
			        // 指定图表的配置项和数据
			        var option = {
			            title : {
			                text: 'Longm Statistics',
			                x: 'center'
			            },
			            tooltip: {
			                trigger: 'item',
			                formatter: "{a} <br/>{b} : {c} ({d}%)"
			            },
			            legend: {
			                orient: 'vertical',
			                left: 'left',
			                data: ['用户访问','用户登陆','用户注册','用户存款','用户取款']
			            },
			            series : [
			                {
			                    name: '访问来源',
			                    type: 'pie',
			                    radius : '55%',
			                    center: ['50%', '60%'],
			                    data:[
			                         {value:result.data.fw,name:'用户访问'},
			                         {value:result.data.dl,name:'用户登陆'},
			                         {value:result.data.zc,name:'用户注册'},
			                         {value:result.data.ck,name:'用户存款'},
			                    	{value:result.data.qk,name:'用户取款'},
			                       ]
								,
			                    itemStyle: {
			                        emphasis: {
			                            shadowBlur: 10,
			                            shadowOffsetX: 0,
			                            shadowColor: 'rgba(0, 0, 0, 0.5)'
			                        }
			                    }
			                }
			            ]
			        };
			
			        app.currentIndex = -1;
			
			        setInterval(function () {
			            var dataLen = option.series[0].data.length;
			            // 取消之前高亮的图形
			            myChart.dispatchAction({
			                type: 'downplay',
			                seriesIndex: 0,
			                dataIndex: app.currentIndex
			            });
			            app.currentIndex = (app.currentIndex + 1) % dataLen;
			            // 高亮当前图形
			            myChart.dispatchAction({
			                type: 'highlight',
			                seriesIndex: 0,
			                dataIndex: app.currentIndex
			            });
			            // 显示 tooltip
			            myChart.dispatchAction({
			                type: 'showTip',
			                seriesIndex: 0,
			                dataIndex: app.currentIndex
			            });
			        }, 1000);
			        if (option && typeof option === "object") {
			            myChart.setOption(option, true);
			        }
				}
		$.ajax({
			url: "http://www.longm.top:8080/lm/Statistics",
			type: "post",
			dataType: 'json',
			headers:{'Content-Type':'application/json'},
			data: {},
			success: function (result) {
				console.log(JSON.stringify(result));
				if (result.code === 200) {
					index(result);
				} else {
					
				}
			}
		});
    </script>
 
    </body>
</html>